<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
	<body>
		<h1 class="pagetitle">
			New Order
		</h1>
		
		<script type="text/javascript">
			
			var pnPN ="";
			
			function addRow(){
				var pnText = $("#pn").find("option:selected").text();
				var pnValue = $("#pn").val();
				var row = "<tr><td>"+pnText+"<input type='hidden' name='pnId' value='"+pnValue+"' /></td><td><input size=5 name='price' class='validate[custom[number]]'/></td><td><input size=5 name='quantity' class='validate[custom[integer]]'/></td><td>删除</td></tr>";
				//alert(row);
				$("#orderSubTable").append(row);
				jQuery("form").validationEngine();//for check input value.
			}
			
			function addRowAuto(){
				var pnText = $("#pn").val();
				if(pnText == "") return;
				var row = "<tr><td>"+pnText+"<input type='hidden' name='pnId' value='"+pnPN+"' /></td><td><input size=5 name='price' class='validate[custom[number]]'/></td><td><input size=5 name='quantity' class='validate[custom[integer]]'/></td><td><a href=# onClick=deleteRow(this)>删除</a></td></tr>";
				//alert(row);
				$("#orderSubTable").append(row);
				jQuery("form").validationEngine();//for check input value.
				$("#pn").val("");
			}
			function deleteRow(obj){
				var tr = obj.parentNode.parentNode;
				var table = tr.parentNode;
				table.removeChild(tr);
			}
		
			function checkInputData(){
				
				var pnIds = document.getElementsByName('pnId');
				var quantitys = document.getElementsByName('quantity');
				var prices = document.getElementsByName('price');
				var orderSubUnion = "";
				for(var i = 0;i < pnIds.length;i++){
					if(quantitys[i].value != "" && quantitys[i].value != 0 && prices[i].value != ""){
						var nodeContent = pnIds[i].value + "#" + prices[i].value + "#" + quantitys[i].value + "#:";
						orderSubUnion = orderSubUnion + nodeContent;
					}
					
				}
				if(orderSubUnion == ""){
					alert("Nothing submit,please check.");
					return false;
				}
				alert(orderSubUnion);
				document.getElementById("order.orderSubUnion").value = orderSubUnion;
				return true;
			}
		</script>
		<br>
		<h3>客户:<s:property value="customer.name"/></h3>
		<div class="column1-unit">
				<s:form method="post" action="order!confirm.action" onsubmit="return checkInputData()" validate="true" theme="css_xhtml">
					
					<s:hidden id="order.orderSubUnion" name="order.orderSubUnion"></s:hidden>
					<s:hidden id="order.customerId" name="order.customerId" value="%{customer.id}"></s:hidden>
					<s:if test=" order.id != null"><s:hidden name="order.id"></s:hidden></s:if>
					
					
					<input id="pn" size="100"/>
					
					<input type="button" onclick="addRowAuto()" value="增加料号" class="button"/>
					<br>
					<table class="bigtable" id="orderSubTable">
							<tr>
								<th>
								料号
								</th>
								<th width="100">
								单价
								</th>
								<th width="100">
								数量
								</th>
								<th width="100">
								--
								</th>
							</tr>
							<s:if test=" order.id != null">
								<s:iterator value="order.orderSubList">
									<tr>
										<td>
											${pn.pn}-${pn.remark}
											<s:hidden name="pnId"></s:hidden>
										</td>
										<td>
											<s:textfield name="price" size="5" cssClass="validate[custom[number]]"></s:textfield>
										</td>
										<td>
											<s:textfield name="quantity" size="5" cssClass="validate[custom[integer]]"></s:textfield>
										</td>
										<td>
											删除
										</td>
									</tr>
								</s:iterator>
							</s:if>							
						</table>
						
						<table class="formtable">
							<tr>
								<td width="100">
								备注
								</td>
								<td>
								<s:textarea name="order.remark"></s:textarea>
								</td>
							</tr>
						</table>

						<s:submit cssClass="button" theme="simple"></s:submit>
						<s:reset cssClass="button" theme="simple"></s:reset>
				</s:form>
		</div>
		<script type="text/javascript">
			var jsonData;
			
			$.getJSON("ajax!pn.action", function(myJSON){  
				jsonData = myJSON;
				
				/* var ttt = "";
				for (var i = 0; i < myJSON.length; i++) {  
					ttt +=  myJSON[i].pn+ '-' + myJSON[i].remark + "<br>" ;
				} 
				alert(ttt);  */
				$("#pn").focus().autocomplete(jsonData,{
					dataType:'json',
					minChars: 0,
					max: 5,
					autoFill: true,
					mustMatch: true,
					matchContains: true,
					scrollHeight: 220,
					formatItem: function(data, i, total) {
						pnPN = data.id;
						return data.pn +"--" + data.remark;
					}
				});
			});
		
		</script>
	</body>
</html>